<template>
    <div class="search-pop re-dialog" v-if="popoverVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
            <el-row v-for="(sItem,sindex) in formConfig" :key="sindex">
                <el-col :span="sItem.span" v-for="(item,index) in sItem.list" :key="index">
                    <el-form-item :label="item.label" :prop="item.code" label-width="100px">
                        <el-input
                            v-if="item.type === 'input'"
                            :placeholder="item.placeholder"
                            v-model="ruleForm[item.code]"
                            size="small"
                            style="width: 100%"
                        ></el-input>
                        <el-date-picker
                            v-else-if="item.type === 'datePicker'"
                            v-model="pickerValue"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            size="small"
                            style="width: 100%"
                            @change="pickerChange(pickerValue)"
                        ></el-date-picker>
                        <el-select
                            class="w-100"
                            v-else-if="item.type === 'select'"
                            v-model="ruleForm[item.code]"
                            :placeholder="item.placeholder"
                            size="small"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(it,ind) in item.data"
                                :key="ind"
                                :label="it.dictDataName"
                                :value="it.dictDataCode"
                            ></el-option>
                        </el-select>
                        <el-cascader
                            :clearable='true'
                            v-else-if="item.type === 'cascader'"
                            v-model="ruleForm[item.code]"
                            :props="{ label: 'dictDataName',value: 'dictDataCode' }"
                            :placeholder="item.placeholder"
                            :options="item.data"
                            style="width: 100%"
                        ></el-cascader>
                        <el-tag
                            class="tag"
                            v-else-if="item.type === 'tag'"
                            v-for="(it,ind) in item.data"
                            :key="ind"
                            @click="tagClik(it,item.code)"
                            size="mini"
                            :disable-transitions="true"
                            :hit="true"
                            :style="(ruleForm[item.code]===it.dictDataCode)?`background-color:${it.dictDataDesc};color:#fff`:`color:${it.dictDataDesc};border:1px solid ${it.dictDataDesc}`"
                        >{{it.dictDataName}}</el-tag>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <button @click="onSubmit('ruleForm')" class="footer-btn sure">确 定</button>
            <button class="footer-btn cancel" @click="resetForm">重 置</button>
        </span>
        <div class="triangle">
            <span></span>
            <!-- <img src="../../assets/incidentCenter/triangle.png" alt> -->
        </div>
    </div>
</template>

<script>
import Pusub from "../../utils/pubsub";
import Pubsub from "../../utils/pubsub";
import { chunkArr } from "../../utils";
import {
    findByDictCode,
    dictItemQueryEventTypeCodeTree
} from "../../config/api.js";

export default {
    data() {
        return {
            popoverVisible: false,
            toggle: false, //
            currentName: "", //记录当前选中的窗口
            defaultShowList: [],
            fileList: [],
            pickerValue: [],
            ruleForm: {
                eventName: "",
                applyPersonName: "",
                startTime: "",
                endTime: "",
                classBigCode: "",
                classSmallCode: "",
                eventLevelCode: "",
                emergencyCode: "",
                eventStatus: ""
            },
            rules: {},
            mailTypeCode: [], //取件类型
            formConfig: [
                {
                    span: 11,
                    list: [
                        {
                            label: "事件名称",
                            value: "",
                            code: "eventName",
                            type: "input",
                            placeholder: "请输入事件名称"
                        },
                        {
                            label: "案发时间",
                            value: "",
                            code: "startTime",
                            type: "datePicker"
                        }
                    ]
                },
                {
                    span: 11,
                    sign: "class",
                    list: [
                        {
                            label: "事件等级",
                            value: "",
                            code: "eventLevelCode",
                            type: "tag",
                            data: []
                        },
                        {
                            label: "事件类型",
                            value: "",
                            code: "classCode",
                            type: "cascader",
                            placeholder: "请选择事件类型",
                            data: []
                        }
                    ]
                },
                {
                    span: 11,
                    sign: "eventLevel",
                    list: [
                        {
                            label: "紧急程度",
                            value: "",
                            code: "emergencyCode",
                            type: "tag",
                            data: []
                        },
                    ]
                },
                {
                    span: 22,
                    sign: "eventStatus",
                    list: [
                        {
                            label: "事件状态",
                            value: "",
                            code: "eventStatus",
                            type: "tag",
                            data: [
                                {
                                    dictDataName: "未上报",
                                    dictDataCode: "0",
                                    dictDataDesc: "#2b88ff"
                                },
                                {
                                    dictDataName: "已上报",
                                    dictDataCode: "1",
                                    dictDataDesc: "#f5d500"
                                },
                                {
                                    dictDataName: "已受理",
                                    dictDataCode: "2",
                                    dictDataDesc: "#002c65"
                                },
                                {
                                    dictDataName: "已派发",
                                    dictDataCode: "4",
                                    dictDataDesc: "#f5d500"
                                },
                                {
                                    dictDataName: "已接收",
                                    dictDataCode: "5",
                                    dictDataDesc: "#f5d500"
                                },
                                {
                                    dictDataName: "派件中",
                                    dictDataCode: "6",
                                    dictDataDesc: "#2b88ff"
                                },
                                {
                                    dictDataName: "已承接",
                                    dictDataCode: "7",
                                    dictDataDesc: "#002c65"
                                },
                                {
                                    dictDataName: "已完成",
                                    dictDataCode: "8",
                                    dictDataDesc: "#1cca82"
                                },
                                {
                                    dictDataName: "已办结",
                                    dictDataCode: "10",
                                    dictDataDesc: "#1cca82"
                                },
                                {
                                    dictDataName: "已结案",
                                    dictDataCode: "11",
                                    dictDataDesc: "#1cca82"
                                }
                            ]
                        }
                    ]
                }
            ]
        };
    },
    mounted() {
        this.pubsub_token = Pubsub.subscribe("sjzxSearchPopover", () => {
            if (this.popoverVisible) {
                this.popoverVisible = false;
            } else {
                this.popoverVisible = true;
                this.getDictCode();
            }
        });
    },
    destroyed() {
        this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
    },
    methods: {
        /**
         * 获取数据字典--取件类型
         */
        getDictCode() {
            //事件等级
            findByDictCode({ dictCode: "eventLevelCode" }).then((res = {}) => {
                this.formConfig.find(
                    item => item.sign == "class"
                ).list[0].data = res.data || [];
            });
            //紧急程度
            findByDictCode({ dictCode: "emergencyCode" }).then((res = {}) => {
                this.formConfig.find(
                    item => item.sign == "eventLevel"
                ).list[0].data = res.data || [];
            });
            //事件类型
            // findByDictCode({ dictCode: "classBigCode" }).then((res = {}) => {
            //     this.formConfig.find(
            //         item => item.sign == "class"
            //     ).list[0].data = res.data || [];
            // });
            //事件类型
            dictItemQueryEventTypeCodeTree().then((res = {}) => {
                let data = res.data || [];
                data.map(item => {
                    let firstChildren = item.children || [];
                    firstChildren.map(it => {
                        delete it.children;
                    });
                });
                this.formConfig.find(
                    item => item.sign == "class"
                ).list[1].data = data;
            });
        },
        tagClik(item, code) {
            this.ruleForm[code] = item.dictDataCode;
        },
        pickerChange(pickerValue) {
            if (pickerValue) {
                this.ruleForm.endTime = pickerValue[1].Format("yyyy-MM-dd");
                this.ruleForm.startTime = pickerValue[0].Format("yyyy-MM-dd");
            } else {
                this.ruleForm.startTime = "";
                this.ruleForm.endTime = "";
            }
        },
        onSubmit() {
        let classCode=this.ruleForm.classCode;
          if(classCode&&classCode.length){
              this.ruleForm.classBigCode=classCode[0];
              this.ruleForm.classSmallCode=classCode[1];
          }else{
              this.ruleForm.classBigCode='';
              this.ruleForm.classSmallCode='';
          }
            this.$emit("onSubmit", this.ruleForm);
            this.onClose();
        },
        onClose() {
            this.popoverVisible = false;
        },
        resetForm() {
            this.ruleForm = {
                eventName: "",
                applyPersonName: "",
                startTime: "",
                endTime: "",
                classBigCode: "",
                classSmallCode: [],
                eventLevelCode: "",
                emergencyCode: "",
                eventStatus: ""
            };
            this.pickerValue = "";
            this.$refs.ruleForm.resetFields(); //重置
            this.onSubmit();
        }
    }
};
</script>

<style lang = "scss" scoped>
.search-pop {
    padding: 20px;
    width: 810px;
    background-color: #fff;
    position: absolute;
    top: 20px;
    left: -425px;
    border-radius: 8px;
    box-shadow: 4px 4px 6px 1px #a5a5a5;
    .triangle {
        position: absolute;
        top: -20px;
        left: 50%;
        span {
            display: block;
            width: 0;
            height: 0;
            border-width: 0 20px 20px;
            border-style: solid;
            border-color: transparent transparent #fff;
            position: absolute;
            top: 0px;
            left: -20px;
        }
        /* img {
      position: absolute;
      left: -20px;
      top: -20px;
      width: 40px;
      height: 20px;
    } */
    }
}
.tag {
    color: #333;
    cursor: pointer;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid transparent;
    &:active {
        opacity: 0.8;
    }
}
.dialog-footer {
    button {
        margin: 0 10px;
    }
}
</style>
